<template>
  <div class="product-list-wrap">
    <div class="product-list-content">
      <header class="category-header wrap">
        <i class="nbicon nbfanhui" @click="goBack"></i>
        <div class="header-search">
          <i class="nbicon nbSearch"></i>
          <input type="text" v-model="state.keyword" class="search-title" />
        </div>
        <span class="search-btn" @click="getSearch">搜索</span>
      </header>
      <van-tabs @click-tab="changeTab" type="card" color="#1baeae">
        <van-tab title="推荐" name=""></van-tab>
        <van-tab title="新品" name="new"></van-tab>
        <van-tab title="价格" name="price"></van-tab>
      </van-tabs>
    </div>
    <div class="content">
      <van-pull-refresh v-model="state.refreshing" @refresh="onRefresh" class="product-list-refresh">
        <van-list v-model:loading="state.loading" :finished="state.finished" :finished-text="state.productList.length ? '没有更多了' : '搜索想要的商品'" @load="onLoad">
          <template v-if="state.productList.length">
            <div class="product-item" v-for="(item, index) in state.productList" :key="index" @click="productDetail(item)">
              <img :src="$filters.prefix(item.goodsCoverImg)" alt="" />
              <div class="product-info">
                <p class="name">{{ item.goodsName }}</p>
                <p class="subtitle">{{ item.goodsIntro }}</p>
                <span class="price">￥ {{ item.sellingPrice }}</span>
              </div>
            </div>
          </template>
          <img class="empty" v-else src="https://s.yezgea02.com/1604041313083/kesrtd.png" alt="搜索" />
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { showToast } from "vant";
import { search } from "@/service/good";
const route = useRoute();
const router = useRouter();
const state = reactive({
  keyword: "", // 搜索关键字
  orderBy: "", // 排序方式
  page: 1, // 页码
  goodsCategoryId: 0, // 分类id
  refreshing: false, // 是否下拉刷新状态
  loading: false, // 是否正在加载状态
  finished: false, // 是否加载完成状态
  totalPage: 0, // 总页数
  productList: [], // 商品列表数据数组
  active: "", // 当前激活的tab
  totalPage: 0, // 总页数
});

const init = async () => {
  //获取分类商品Id
  const { categoryId } = route.query;
  // 没有分类id 和搜索关键词 则设置数据加载完成状态且关闭list加载状态
  if (!categoryId && !state.keyword) {
    state.finished = true; // 设置数据加载完成状态
    state.loading = false; // 关闭list加载状态
    return;
  }

  // 加载商品列表数据函数
  const {
    data,
    data: { list },
  } = await search({ keyword: state.keyword, goodsCategoryId: categoryId, orderBy: state.orderBy, pageNumber: state.page });
  console.log(data, "data");

  state.totalPage = data.totalPage; // 更新总页数
  state.productList = state.productList.concat(list); // 合并列表页码数据
  console.log(state.productList, "state.productList");
  state.loading = false; // 关闭加载状态

  //如果当前页码大于总页数，则设置加载完成状态
  if (state.page >= state.totalPage) {
    state.finished = true; // 设置加载完成状态
  }
};

// 搜索商品列表数据
const getSearch = () => {
  onRefresh(); // 调用下拉刷新列表数据函数
};
// 加载列表数据事件
const onLoad = () => {
  // 判断是否不是下拉刷新状态，如果不是则页码加1
  if (!state.refreshing && state.page < state.totalPage) state.page++;
  // 判断是否是下拉刷新状态，如果是则重置列表数据
  if (state.refreshing) {
    state.productList = []; // 重置列表数据
    state.refreshing = false; // 关闭下拉刷新状态
  }
  init(); // 加载list列表数据函数
};
// 下拉刷新数据事件
const onRefresh = () => {
  state.refreshing = true; // 开启下拉刷新状态

  state.finished = false; // 关闭加载完成状态
  state.loading = true; // 开启加载状态
  state.page = 1; // 重置页码
  onLoad(); //加载list列表数据函数
};
// 切换tab标签页事件
const changeTab = ({ name }) => {
  state.orderBy = name; // 更新排序方式
  onRefresh(); // 刷新list列表数据
};
// 返回上一页事件
const goBack = () => {
  router.back();
};
// 进入商品详情页事件
const productDetail = (item) => {
  router.push({ path: "/product", query: { id: item.goodsId } });
};
</script>
<style lang="less" scoped>
@import "../common/style/mixin.less";
.product-list-content {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 10000;
  background-color: #fff;
  .category-header {
    // background-color: aqua;
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 50px;
    line-height: 50px;
    padding: 0 15px;
    .boxSizing();
    font-size: 15px;
    color: #656771;
    z-index: 10000;
    .icon-left {
      font-size: 25px;
      font-weight: bold;
    }
    .header-search {
      display: flex;
      width: 76%;
      line-height: 20px;
      margin: 10px 0;
      padding: 5px 0;
      color: #232326;
      background: #f7f7f7;
      .borderRadius(20px);
      .nbSearch {
        padding: 0 5px 0 20px;
        font-size: 17px;
      }
      .search-title {
        font-size: 12px;
        color: #666;
        background-color: #f7f7f7;
      }
    }
    .icon-More {
      font-size: 20px;
    }
    .search-btn {
      height: 28px;
      margin: 8px 0;
      line-height: 28px;
      padding: 0 5px;
      color: #fff;
      background: @primary;
      border-radius: 14px;
      margin-top: 10px;
    }
  }
}
.content {
  height: calc(~"(100vh - 80px)"); // 高度占满屏幕减去头部的高度
  overflow: hidden; //隐藏滚动条，但是可以滚动
  overflow-y: scroll; //滚动条只在垂直方向显示
  margin-top: 78px;
  .product-list-refresh {
    .product-item {
      display: flex;
      justify-content: space-between;
      width: 100%;
      padding: 10px 0;
      border-bottom: 1px solid #f5f5f5;
      img {
        width: 140px;
        height: 120px;
        padding: 0% 10px;
        .boxSizing();
      }
      .product-info {
        width: 56%;
        height: 120px;
        padding: 5px;
        text-align: left;
        .boxSizing();
        p {
          margin: 0;
        }
        .name {
          width: 100%;
          max-height: 40px;
          line-height: 20px;
          font-size: 15px;
          color: #333;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap; // 不换行，超出部分省略号显示
        }
        .subtitle {
          width: 100%;
          // max-height: 46px;
          line-height: 20px;
          padding: 10px 0;
          font-size: 13px;
          color: #999;
          overflow: hidden;
        }
        .price {
          font-size: 16px;
          color: @primary;
        }
      }
    }
    .empty {
      display: block;
      width: 150px;
      margin: 50px auto 20px;
    }
  }
}
</style>
